<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17_文本溢出</title>
    <style>
        ul{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            font-size: 20px;
            /*去掉文字前面的小点*/
            list-style: none;
            /*去掉原有的左内边距*/
            padding-left: 0;
        }
        li{
            margin-bottom: 20px;
        /*    让li一行显示,强制不换行*/
            white-space:nowrap;
        /*    text-overflow:专门控制文本溢出,overflow是控制元素在另外一个元素中的溢出,text-overflow需要配合overflow使用
                clip:直接截取超出的文字
                ellipsis:超出部分用...进行占位

        */
            text-overflow:ellipsis;
            /*需要配合overflow使用,overflow的值为非visible*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, provident?</li>
        <li>Lorem ipsum dolor sit amet, consectetur.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus praesentium quasi quidem.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur debitis eum numquam quos rem tenetur!</li>

    </ul>
</body>
</html>